import React from 'react'
import { Button, NavBar } from 'antd-mobile'
import style from './index.module.css'
import { useSelector, useDispatch } from 'react-redux'
import { useNavigate } from 'react-router-dom'
import { clearUserInfo } from '../../store/user/userSlice'
import {useDebonue} from '../../hooks/useDebonue'
function My() {
    const navigate = useNavigate()
    const dispatch = useDispatch()
    const { avator } = useSelector(state => state.user.userInfo)
    const { username } = useSelector(state => state.user.userInfo)

  // console.log(userInfo)
  const goLogin=useDebonue(()=>{
    console.log('防抖')
    dispatch(clearUserInfo())
    navigate('/login')
  })
  return (
    <div>
       <NavBar backIcon={false}>我的</NavBar>
       <div className={style['my_head']}>
            {
                avator ? <div className={style['my_head_info']}>
                    <img src={avator} alt="" />
                    <p>{username}</p>
                    <Button type="primary" onClick={()=>goLogin()}>退出登录</Button>
                </div> : 
                <Button type="primary" onClick={()=>goLogin()}>去登陆</Button>
            }
       </div>
    </div>
  )
}

export default My
